<template>
  <el-pagination
    :current-page.sync="paginate.currentPage"
    :page-size="paginate.listRows"
    :page-sizes="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="paginate.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    @prev-click="handleCurrentChange"
    @next-click="handleCurrentChange"
  />
</template>

<script>
import { mapState } from 'vuex';
import site from '@/site.js'

export default {
  props: {
    loadpage: {
      type: Function,
      default: undefined
    },
    pageSize: {
      type: Array,
      default: () => {
        return site.page_sizes;
      }
    }
  },
  data() {
    return {
      currentPage: 1
    };
  },
  computed: {
    ...mapState('pageList/paginate', ['paginate'])
  },
  methods: {
    // 分页条数
    handleSizeChange: function(val) {
      // 更新加载条数
      this.$store.dispatch('pageList/paginate/setPaginate', {
        listRows: val
      });
      this.handleCurrentChange(1);
      return val + '/页';
    },
    // 点击分页数
    handleCurrentChange: function(val) {
      // 更新当前加载的页数
      this.$store.dispatch('pageList/paginate/setPaginate', {
        currentPage: val
      });
      if (this.$util.isFunction(this.loadpage)) {
        return this.loadpage();
      }
      // 触发paginate
      this.$store.dispatch('pageList/loadData', {});
    }
  }
};
</script>

<style></style>
